@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// breakpoints variables
$breakpoint-max: 1680px !default;
$breakpoint-xxl: 1440px !default;
$breakpoint-xlg: 1280px !default;
$breakpoint-lg: 960px !default;
$breakpoint-md: 768px !default;
$breakpoint-sm: 480px !default;

// Define CSS variables for breakpoints
:root {
  --breakpoint-sm: #{$breakpoint-sm};
  --breakpoint-md: #{$breakpoint-md};
  --breakpoint-lg: #{$breakpoint-lg};
  --breakpoint-xlg: #{$breakpoint-xlg};
  --breakpoint-xxl: #{$breakpoint-xxl};
  --breakpoint-max: #{$breakpoint-max};
}

// mixin
@mixin respond-to($breakpoint) {
  @if $breakpoint == "sm" {
    @media screen and (min-width: var(--breakpoint-sm)) {
      @content;
    }
  } @else if $breakpoint == "md" {
    @media screen and (min-width: var(--breakpoint-md)) {
      @content;
    }
  } @else if $breakpoint == "lg" {
    @media screen and (min-width: var(--breakpoint-lg)) {
      @content;
    }
  } @else if $breakpoint == "xlg" {
    @media screen and (min-width: var(--breakpoint-xlg)) {
      @content;
    }
  } @else if $breakpoint == "xxl" {
    @media screen and (min-width: var(--breakpoint-xxl)) {
      @content;
    }
  } @else if $breakpoint == "max" {
    @media screen and (min-width: var(--breakpoint-max)) {
      @content;
    }
  }
}
